<template>
    <div class="infobox">
        <div class="top-box">
            <h1>{{infoList.title}}</h1>
            <p>
                <span>发表时间：{{infoList.add_time|dataFormat}}</span>
                <span>点击：{{infoList.click}}次</span>
            </p>
        </div>
        <hr>



        <div>

              <vue-preview
      :list="list"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
      @close="closeHandler"
      @destroy="destroyHandler"
    />
        </div>
        <!-- 这是图片缩略图的位置 -->
        <div class="content-box">

        </div>

        <div class="fabiao" v-html="infoList.content">
          
        </div>
          <com-box :id="id"></com-box>
    </div>
</template>
<script>

// 引入评论组件
import comment from '../subcoment/comment.vue'


export default {
    data() {
        return {
           id:this.$route.params.id,
           infoList:{},
           list:[]
        }
    },
    created() {
        this.getinfomsg(),
        this.getsuolueList()
    },
    methods: {
        getinfomsg(){
            this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/'+this.id).then(result=>{
                if(result.body.status==0){
                    console.log(result.body.message)
                    this.infoList=result.body.message[0]
                }
            })
        },
        getsuolueList(){
            this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id).then(result=>{
                if(result.body.status==0){
                    result.body.message.forEach(item => {
                        item.w=600
                        item.h=400
                    });
                    this.list=result.body.message
                }
            })
        },
         closeHandler() {
      console.log('closeHandler')
    },
    // 完全关闭之后，调用这个函数清理资源
    destroyHandler() {
      console.log('destroyHandler')
    }    
    },
    components:{
        'com-box':comment
    }
   

}
</script>
<style lang="scss" scoped>
.infobox{
    padding:3px;
    .top-box{
        h1{
            font-size: 15px;
            text-align: center;
            margin: 10px 0;
            color: #26A2FF
        }
        p{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
    }
    .fabiao{
        font-size: 14px;
        line-height: 30px;
    }
}
</style>
